<!DOCTYPE html>
<html>
<head>
    <meta content="text/html" charset="UTF-8">
    <title>jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
    <link rel="stylesheet" href="css/themes/icon.css"/>
    <link rel="stylesheet" type="text/css" href="css/mycss.css"/>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<table id="test_msg"></table>
<script type="text/javascript">
    var $test_msg=$('#test_msg');
    var textitemindex=-1;
    $test_msg.datagrid({
        edititem:[],
        fit:true,
        pagination:true,
        singleSelect:true,
        checkOnSelect:false,
        selectOnCheck:false,
        url:'data/textmsg_data.json',
        saveUrl: 'save_user.php',
        updateUrl: 'update_user.php',
        destroyUrl: 'destroy_user.php',
        columns:[[
            {field:'ck',checkbox:true},
            {field:'ids',title:'MsgId'},
            {field:'text',title:'内容',width:600,editor:{type:'textarea',options:{required:true}}},
            {field:'author',title:'作者'},
            {field:'ctime',title:'创建时间',editor:{type:'datetimebox',options:{required:true}}}
        ]],
        onBeforeEdit:function(rowIndex){
            var edititem=$test_msg.datagrid('options').edititem;
            edititem.push(rowIndex);
        },
        onDblClickRow:function(rowIndex){
            $test_msg.datagrid('beginEdit', rowIndex);
        },
        toolbar:[
            {
                iconCls:'icon-add',
                text:'添加',
                handler:function(){
                    $test_msg.datagrid('appendRow',{
                        "id": textitemindex--,
                        "text": "新内容"
                    });
                    var editIndex = $test_msg.datagrid('getRows').length-1;
                    $test_msg.datagrid('selectRow', editIndex)
                            .datagrid('beginEdit', editIndex);
                }
            },
            {
                iconCls:'icon-save',
                text:'接受改变',
                handler:function(){
                    var options=$test_msg.datagrid('options');
                    $.each(options.edititem,function(i,n){
                        $test_msg.datagrid('endEdit',n);
                    });
                    options.edititem=[];
                }
            },
            {
                iconCls:'icon-save',
                text:'保存',
                handler:function(){
                    var rows=$test_msg.datagrid('getChanges');
                    console.log(rows);
                }
            },
            {
                iconCls:'icon-cancel',
                text:'取消更改',
                handler:function(){
                    $test_msg.datagrid('rejectChanges');
                }
            },
            {
                iconCls:'icon-remove',
                text:'删除选中行',
                handler:function(){
                    var rows=$test_msg.datagrid('getChecked');
                    $.messager.confirm('确认','您确认想要删除'+rows.length+'记录吗？',function(r){
                        if (r){
                            alert('确认删除');
                        }
                    });
                }
            }
        ]
    });

    function del (){
        var rows =  $test_msg.edatagrid("getChecked");
        $test_msg.edatagrid('destroyRow',rows);
    }
</script>
</body>
<script type="text/javascript">
    alert("init");
</script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</html>